<template>
  <div class="upload-panel">
    <div class="tip">
      <span>附件</span>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="最多一次上传十个文件且文件大小不超过500MB"
        placement="top"
      >
        <el-icon>
          <QuestionFilled />
        </el-icon>
      </el-tooltip>
    </div>
    <div class="upload-area">
      <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖拽到这里 或者 <em>点击上传文件</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">支持多种文档文件上传</div>
        </template>
        <!-- 自定义文件列表 -->
        <template #file="{ file }">
          <div class="el-upload-list__item is-success">
            <img
              class="el-icon--file"
              :src="getFileIcon(file)"
              alt="File Icon"
            />
            <a class="el-upload-list__item-name" @click="handlePreview(file)">
              {{ file.name }}
            </a>
            <label class="el-upload-list__item-status-label">
              <i class="el-icon-upload-success el-icon--check"></i>
            </label>
            <el-icon
              class="el-icon-close"
              @click="() => handleRemove(file)"
              title="移除"
            >
              <Close />
            </el-icon>
            <i class="el-icon-close-tip">按 delete 移除</i>
          </div>
        </template>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";

const fileList = ref([
  {
    name: "文件名称.docx", //文件名称
    url: "文件上传地址", //文件上传地址
  },
  {
    name: "文档名称.pptx",
    url: "文件上传地址",
  },
  {
    name: "文档名称.pdf",
    url: "文件上传地址",
  },
  {
    name: "文档名称.xls",
    url: "文件上传地址",
  },
  {
    name: "文档名称.7z",
    url: "文件上传地址",
  },
  {
    name: "文档名称.rar",
    url: "文件上传地址",
  },
  {
    name: "文档名称.zip",
    url: "文件上传地址",
  },
  {
    name: "未知文件",
    url: "文件上传地址",
  },
]);

const handleRemove = (file, uploadFiles) => {
  console.log("handleRemove", file, uploadFiles);
  // 使用数组的 filter 方法来移除匹配的文件
  fileList.value = fileList.value.filter((item) => item.name !== file.name);
};

const handlePreview = (file) => {
  console.log("handlePreview", file);
};

// 根据文件类型返回对应的图标路径
function getFileIcon(file) {
  const extension = file.name.split(".").pop();
  const iconMap = {
    docx: require("@/assets/svg/ic_files_doc.svg"),
    pdf: require("@/assets/svg/ic_files_pdf.svg"),
    xls: require("@/assets/svg/ic_files_xls_normal.svg"),
    pptx: require("@/assets/svg/ic_files_pptx.svg"),
    rar: require("@/assets/svg/ic_files_rar.svg"),
    zip: require("@/assets/svg/ic_files_zip.svg"),
    "7z": require("@/assets/svg/ic_files_7z.svg"),
    // ... 其他文件类型映射
  };

  // 如果文件类型没有对应的图标，可以返回一个默认图标
  return iconMap[extension] || require("@/assets/svg/ic_files_documents.svg");
}
</script>

<style lang="scss" scoped>
.upload-panel {
  .tip {
    font-weight: 700;
    line-height: 32px;
    margin-right: 10px;

    & > span {
        margin-right: 5px;
      }
  }
}

.el-upload-list__item {
    .el-icon--file {
      margin-right: 8px;
      width: 24px;
      /* 根据需要调整图标大小 */
      height: 24px;
      /* 根据需要调整图标大小 */
    }
  
    .el-icon-close {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
  
    .el-icon-close-tip {
      display: none;
      position: absolute;
      right: 10px;
      top: 0;
      font-size: 12px;
      background: #fff;
      color: #f56c6c;
      cursor: pointer;
    }
  }
</style>
